<template>
	<view class="zone">
		<!-- <Header title="大玩家" :headertype="2"></Header> -->

		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<view class="n_left">
						<u-icon class="back" size="20px" color="#000" @click="$p.back()" name="arrow-left"></u-icon>
						<text>大玩家</text>
					</view>
					<text class="shouxu" @click="popshow = true">手续费补贴</text>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<view class="topbox">
				<view class="topeword">
					质押一定的银元给平台后，获得玩家身份，如果被举报违约平台核实后，将扣除质押银元，取消玩家资格，赠送或被他人赠送银元时，手续费比普通用户低。<text
						@click="$p.navto('/pages/index/goldwoldrule')">规则详情
						<u-icon name="arrow-right" color="#252525" size="20"></u-icon>
					</text>
				</view>

				<view class="b_top">
					<view class="left">
						<view class="header">
							<image
								:src="userinfo.wx_img?userinfo.wx_img :'http://img.cpgm.cc/panda/static/login/logo.png'"
								mode="" />
						</view>
						<view class="fldc">
							<text class="name">{{userinfo.wx_nickname?userinfo.wx_nickname:'潮玩新人'}}</text>
							<view>
								<text>{{userinfo.super == 1?'初级大玩家':userinfo.super == 2?'中级大玩家':userinfo.super == 3?'高级大玩家':userinfo.super == 4?'超级大玩家':userinfo.super == 5?'钻石大玩家':userinfo.super == 6?'星耀大玩家':'未成为大玩家' }}</text>
								<!-- <view v-if="userinfo.super > 0" class="button" @click="cancelshow = true">取消</view> -->
							</view>
						</view>
					</view>

					<view class="fldc">
						<!-- <view class="button" @click="popshow = true">手续费补贴</view> -->
						<view class="button" @click="show = true">升级大玩家</view>
					</view>
				</view>

			</view>


			<view class="box">

				<view class="botlist">
					<view class="title">
						<text>平台玩家</text>
					</view>

					<scroll-view scroll-y class="scolly" lower-threshold="50" @scrolltolower="scrolltolower">
						<view class="list">
							<view class="item" v-for="(item,index) in datalist" :key="index">
								<view class="i_left">
									<view class="header">
										<image
											:src="item.wx_img?item.wx_img:'http://img.cpgm.cc/panda/static/login/logo.png' "
											mode="" />
									</view>
									<view class="word">
										<p>
											<text>{{item.wx_nickname?item.wx_nickname:'潮玩新人'}}</text>
										</p>
										<p>
											<text>QQ:{{item.qq}}</text>
											<span class="invitecode">ID:{{item.invite_code}}</span>
										</p>
									</view>
								</view>

								<view class="i_right ">
									<p>质押银元：
										<text>{{item.super == 1?'100':item.super == 2?'600':item.super == 3?'2000':item.super == 4?'5000':item.super == 5?'10000':item.super == 6?'20000':'未成为大玩家' }}</text>
									</p>
									<view class="button" @click="linkwold(item)">联系TA</view>
								</view>
							</view>
						</view>

						<view class="empty" v-if="datalist == ''">
							<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" mode="widthFix" />
							<text>数据为空</text>
						</view>
						<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
					</scroll-view>
				</view>
			</view>
		</view>



		<!-- 升级大玩家 -->
		<u-popup v-model="show" mode="bottom" :closeable="false" close-icon-color="#fff" border-radius="18">
			<view class="popbox">
				<image class="p_close" @click="show= false" src="http://img.cpgm.cc/panda/static/feed/cha.png"
					mode="widthFix" />
				<view class="become">成为银元大玩家</view>
				<!-- 选择列表 -->
				<view class="choose">
					<view class="choose_title">
						<text>选择升级类型</text><text class="xiao">（提高大玩家等级只需补差价即可）</text>
					</view>
					<view class="choose_list">
						<view class="choose_item" :class="[index == stat?'active':'']" v-for="(item,index) in list"
							:key="index" @click="change(index)">
							<text>{{item.name1}}</text>
							<text>质押{{item.num}}银元</text>
						</view>
					</view>
				</view>
				<view class="flewbox">
					<view>
						<text>质押银元数</text>
						<text>{{sjnumber[stat]}}个</text>
					</view>
				</view>

				<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
					class="button upgrade" @click="becomesuper()">
					成为{{stat==0?'初级大玩家':stat==1?'中级大玩家':stat==2?'高级大玩家':stat==3?'超级大玩家':stat==4?'钻石大玩家':stat==5?'星耀大玩家':'未知'}}
				</u-button>
				<p class="have">拥有银元数：<text>{{userinfo.silver}}</text> 个</p>
			</view>
		</u-popup>




		<!-- 是否取消初级大玩家身份？ -->
		<u-mask :show="cancelshow" :custom-style="{background: 'rgba(0, 0, 0, 0.85)'}">
			<view class="warp">
				<view class="maskbox">
					<view class="m_title">
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
						<text>是否取消大玩家身份？</text>
						<image src="http://img.cpgm.cc/panda/static/login/star.png" mode="widthFix" />
					</view>
					<!-- <view class="m_title">是否取消大玩家身份？</view> -->
					<view class="m_content">5个工作日内没有被举报违约，质押的银元将退回</view>
					<view class="btnbox">
						<view class="button quit" @click="cancelshow = false">取消</view>
						<view class="button cancel" @click="cancelsure()">确定</view>
					</view>
				</view>
			</view>
		</u-mask>

		<u-mask :show="popshow">
			<view class="warp pupbox">
				<view class="puptit">手续费补贴</view>
				<view class="content">
					<p>为增加好友互赠道具，成为大玩家的用户可以获得对方赠送手续费补贴： <br> <br>
						初级大玩家，获得手续费20%补贴 <br>
						中级大玩家，获得手续费30%补贴<br>
						高级大玩家，获得手续费40%补贴<br>
						超级大玩家，获得手续费60%补贴<br>
						钻石大玩家，获得手续费80%补贴<br>
						星耀大玩家，获得手续费100%补贴<br><br>
					升级后联系客服晋升群管理和进核心微信群 <br></p>
				</view>
				<view class="button" @click="popshow=false">我知道了</view>
			</view>
		</u-mask>

		<u-mask :show="show4">
			<view class="warpss">
				<view class="top_wa">
					<image src="http://img.cpgm.cc/panda/static/feed/cha.png" @click="show4=false" class="chahao" mode="widthFix"></image>
					<!-- 上面的头部 -->
					<view class="head_tou">
						联系方式
					</view>
				
					<!-- //微信号 -->
					<view class="weixin">
						<view class="wxh">
							微信号
						</view>
						<input type="text" class="inp" :disabled="true"  v-model="wx" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(wx)">复制</view>
					</view>
					<view class="weixin">
						<view class="wxh">
							QQ号
						</view>
						<input type="text" class="inp" :disabled="true"  v-model="QQ" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(QQ)">复制</view>
					</view>
					<view class="weixin">
						<view class="wxh">
							QQ群
						</view>
						<input type="text" class="inp" :disabled="true"  v-model="qqq" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(qqq)">复制</view>
					</view>
					<view class="weixin">
						<view class="wxh">
							手机号
						</view>
						<input type="text" class="inp" :disabled="true"  v-model="phon" placeholder="暂未设置" id="">
						<view class="button copybtn" @click="copy(phon)">复制</view>
					</view>
					<!-- 下面的确认按钮 -->
					<view class="btn_que button" @click="show4 = false">
						确定
					</view>
				</view>
			</view>
		</u-mask>


		<!-- 人物信息详情 -->
		<!-- <Userinfo :commonlist="commonlist" :type="2" ref="info"></Userinfo> -->
		<!-- <Userinfo :id="p_userid" :type="1" ref="info"></Userinfo> -->
	</view>
</template>

<script>
	// import userinfo from '@/components/Userinfo/Userinfo'
	import config from '@/common/config/index'
	export default {
		// components:{
		// 	userinfo,
		// },
		data() {
			return {
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				background: {
					backgroundColor: 'transparent',
				},
				show: false,
				infoshow: false,
				cancelshow: false,
				list: [{
						id: 1,
						name1: '初级大玩家',
						num: 100
					},
					{
						id: 2,
						name1: '中级大玩家',
						num: 600
					},
					{
						id: 3,
						name1: '高级大玩家',
						num: 2000
					},
					{
						id: 4,
						name1: '超级大玩家',
						num: 5000
					},
					{
						id: 5,
						name1: '钻石大玩家',
						num: 10000
					},
					{
						id: 6,
						name1: '星耀大玩家',
						num: 20000
					},
				],
				stat: 0, //选择大玩家等级
				userinfo: '',
				sjnumber: [100, 600, 2000, 5000,10000,20000],
				page: 1,
				max_page:'',
				datalist: '',
				commonlist: {},
				popshow: false,
				p_userid: '',
				show4:false,
				phon: '',
				QQ: '',
				wx: '',
				qqq:'',
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			};
		},
		onLoad() {
			this.getUserInfo();
			this.superList();
		},
		methods: {
			// 成为超级大玩家接口
			async becomesuper() {
				let res = await this.$http.index.becomesuper({
					type: this.stat + 1
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.getUserInfo()
					this.superList2();
					this.show = false
				}
			},
			// 请求用户信息接口
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				this.userinfo = res.data
			},
			// 选择超级大玩家
			change(index) {
				// console.log(index);
				this.stat = index
			},

			// 加载
			scrolltolower() {
				if (this.page >= this.max_page) {
					this.status = 'nomore'
					return;
				}
				this.status = 'loading';
				this.page = ++this.page;
				this.superList()
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
					else this.status = 'loading';
				}, 500)
			},

			// 获取大玩家联系方式
			async linkwold(item){
				let n = await this.$http.index.getInfo({
					id: item.id
				})
				if(n.code == 1) {
					this.wx = n.data.wx?n.data.wx:'暂未设置'
					this.QQ = n.data.qq?n.data.qq:'暂未设置'
					this.phon = n.data.mobile?n.data.mobile:'暂未设置'
					this.qqq = n.data.qqq?n.data.qqq:'暂未设置'
					this.show4 = true
				}
			},

			copy(text){
				this.$p.copy(text)
			},
			
			
			// 取消超级大玩家
			async cancelsure() {
				let res = await this.$http.index.cancelSuper()
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.getUserInfo()
					this.superList()
					this.cancelshow = false
				}
			},

			// 获取超级大玩家数据
			async superList() {
				let res = await this.$http.index.superList({
					page: this.page,
				})
				this.datalist = [...this.datalist , ...res.list] 
				this.max_page = res.page
				if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
			},

			async superList2() {
				this.page = 1
				let res = await this.$http.index.superList({
					page: 1,
				})
				this.datalist = res.list 
				this.max_page = res.page
				if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
			},

			// 参看个人信息
			seeinfo(item) {
				this.p_userid = item.id
				setTimeout(() => {
					this.$refs.info.show()
				}, 100);
			},
		},
	}
</script>

<style lang="less" scoped>
	.zone {
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		min-height: 100vh;
	}

	.topbox {
		margin: 10px;
	}

	.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		text {
			color: #000;
			font-weight: 600;
			font-size: 25px;
			margin-left: 5px;
		}
	}

	.shouxu {
		color: #000;
		font-size: 14px;
	}

	// 设置导航栏透明色
	.slot-wrap {
		background: transparent;
	}


	.main {
		// padding: 10px;
	}

	.topeword {
		color: #131314;
		font-size: 12px;
		margin-top: 10px;

		text {
			color: #252525;
			font-size: 12px;
			text-decoration: underline;

			image {
				width: 8px;
			}
		}
	}

	.name {
		color: #343434;
		font-size: 14px;
	}


	.box {
		margin-top: 12px;
		overflow-y: scroll;
	}

	.b_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		background: rgba(255, 255, 255, 0.51);
		padding: 10px;
		border-radius: 10px;

		.button {
			width: 91px;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			border-radius: 5px;
			color: #B73800;
			font-size: 13px;
			font-weight: 600;
			line-height: 36px;
			margin: 3px 0;
		}
	}

	.header {
		width: 50px;
		height: 50px;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;

		image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	.left {
		display: flex;
		align-items: center;

		image {
			width: 40px;
			height: 40px;

		}

		text {
			font-size: 14px;
			color: #B04613;
		}
	}

	.botlist {
		padding: 10px;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 10px;
		color: #343434;
		font-weight: 600;

		text:nth-child(2) {
			color: #FF456B;
		}

		text {
			font-size: 12px;
		}

	}

	.list {
		// margin-top: 12px;
	}

	.item {
		background: rgba(255, 255, 255, 0.71);
		border-radius: 7px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;

		.button {
			width: 72px;
			height: 33px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			color: #B73800;
			font-weight: 600;
			font-size: 12px;
		}
	}

	.i_left {
		flex: 1;
		display: flex;
		align-items: center;

		image {
			width: 40px;
			height: 40px;
		}
	}

	.word {
		display: flex;
		flex-direction: column;

		p:nth-child(1) {
			text:nth-child(1) {
				color: #343434;
				font-size: 14px;
				font-weight: 600;
			}

			text:nth-child(2) {
				margin-left: 10px;
				font-size: 12px;
				font-weight: 600;
				color: #FF456B;
				background: linear-gradient(270deg, rgba(255, 69, 107, 0.21) 0%, rgba(254, 92, 79, 0.21) 100%);
				border-radius: 16px;
				padding: 2px 5px;
			}
		}

		p:nth-child(2) {
			color: #000000;
			margin-top: 5px;

			text {
				font-size: 12px;
				color: #343434;
			}
		}


	}

	.num {
		color: #239D4C;
		font-size: 14px;
		font-weight: 600;
	}

	// 弹出层
	.popbox {
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		padding: 20px 15px 30px;
	}

	.become {
		color: #000000;
		font-size: 20px;
		font-weight: 600;
		text-align: center;
	}

	.p_topeword {
		margin-top: 10px;
		color: #343434;
		font-size: 13px;
		font-weight: 600;

		text {
			color: #239D4C;
			font-size: 13px;

			image {
				width: 8px;
			}
		}
	}

	.choose {
		margin-top: 20px;
	}

	.choose_title {
		display: flex;
		align-items: center;
		// justify-content: space-between;

		// .xiao {
		// 	color: #343434;
		// 	font-weight: 400;
		// 	font-size: 14px;
		// }

		text:nth-child(1) {
			color: #343434;
			font-weight: 600;
			font-size: 16px;
		}

		text:nth-child(2) {
			color: #343434;
			font-weight: 600;
			font-size: 14px;
		}


	}


	.choose_list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
		flex-wrap: wrap;
	}

	.choose_item {
		width: 48%;
		padding: 10px;
		color: #000000;
		margin-bottom: 10px;
		background: #fff;
		border-radius: 5px;
		border-radius: 9px;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 13px;
		overflow: hidden;

		text:nth-child(1) {
			color: #000000;
			font-size: 14px;
			font-weight: 600;
		}

		text:nth-child(2) {
			color: #239D4C;
			margin-top: 5px;
		}
	}


	.active {
		position: relative;
		background:  linear-gradient(180deg, #0578FC 0%, #7AFDCF 100%);
		border-radius: 7px;

		text:nth-child(1) {
			color: #fff;
			font-size: 14px;
		}

		text:nth-child(2) {
			color: #fff;
			margin-top: 5px;
		}
	}

	.p_close {
		width: 30px;
		position: absolute;
		top: 10px;
		right: 10px;
	}


	// 联系方式

	.link {
		margin-top: 25px;
	}

	.link_tit {
		color: #B04613;
		font-size: 16px;
		font-weight: 600;
		display: flex;
		align-items: center;

		text {
			color: rgba(179, 136, 102, .81);
			font-size: 12px;
			font-weight: normal;
			margin-left: 5px;
		}
	}

	.l_input {
		background: rgba(255, 255, 255, .51);
		border-radius: 22px;
		padding: 10px;
		margin-top: 10px;
		display: flex;
		align-items: center;

		input {
			flex: 1;
			margin-left: 5px;
			color: #70390A;
			font-size: 14px;
			font-weight: 600;
		}
	}

	.l_left {
		display: flex;
		align-items: center;

		image {
			width: 40px;
		}

		text {
			color: #9B5634;
			font-size: 14px;
			font-weight: 600;
		}
	}

	.flewbox {
		margin-top: 20px;

		view {
			display: flex;
			align-items: center;
			margin: 5px 0;

			text:nth-child(1) {
				color: #696969;
				font-size: 13px;
				font-weight: 600;
				margin-right: 5px;
			}

			text:nth-child(2) {
				color: #000;
				font-size: 14px;
				font-weight: 600;
			}
		}
	}

	.upgrade {
		width: 80%;
		height: 65px;
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		border-radius: 5px;
		color: #B73800;
		font-size: 18px;
		font-weight: 600;
		margin: 20px auto 0;
	}

	.fldc {
		display: flex;
		flex-direction: column;

		text {
			color: #343434;
			font-weight: 600;
			font-size: 14px;
		}

		view {
			display: flex;
			align-items: center;

			text {
				color: #696969;
				font-size: 12px;
				margin-right: 10px;
			}

			.button {
				width: 36px;
				height: 20px;
				color: #FF456B;
				background: linear-gradient(270deg, rgba(255, 69, 107, 0.21) 0%, rgba(254, 92, 79, 0.21) 100%);
				border-radius: 16px;
				font-size: 12px;
			}
		}
	}


	// 弹窗
	.warp {
		width: 90%;
		position: relative;
		left: 5%;
		top: 50%;
		transform: translateY(-50%);
	}

	.maskbox {
		background: url('http://img.cpgm.cc/panda/static/my/bg3.png');
		border-radius: 19px;
		padding: 15px;
		background-size: 100% 100%;
		border-radius: 20px;
		padding: 30px 10px;
		display: flex;
		align-items: center;
		flex-direction: column;
	}



	.btnbox {
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.button {
			width: 109px;
			height: 40px;
		}
	}

	.m_content {
		color: #000000;
		font-size: 14px;
		margin: 30px 0;
		text-align: center;
	}

	.quit {
		background: #434343;
		border-radius: 7px;
		color: rgba(255, 255, 255, .81);
		font-size: 14px;
		font-weight: 600;
	}

	.cancel {
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		margin-left: 20px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
	}

	.scolly {
		height: calc(100vh - 266px);
		box-sizing: border-box;
		margin-top: 10px;
	}

	.have {
		text-align: center;
		color: #696969;
		font-size: 13px;
		margin-top: 10px;

		text {
			color: #000;
		}
	}

	.name {
		display: block;
	}

	// 手续费

	.pupbox {
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		padding: 20px 12px;
		border-radius: 20px;

		.button {
			width: 80%;
			height: 55px;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			margin: 20px auto 0;
			color: #B73800;
			font-size: 16px;
			font-weight: 600;
		}
	}

	.puptit {
		color: #000;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
	}

	.pbox {
		margin-top: 10px;

		p {
			color: #696969;
		}
	}

	.mart15 {
		margin-top: 15px;
	}

	.poplist {
		margin-top: 10px;
	}

	.popitem {
		margin: 5px 0;

		text:nth-child(1) {
			font-size: 14px;
			color: #696969;
		}

		text:nth-child(2) {
			font-size: 12px;
			margin-left: 15px;
			color: #696969;
		}
	}


	.m_title {
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			position: relative;
			color: #131314;
			font-size: 16px;
			margin: 0 10px;
			font-weight: 600;
			z-index: 99;
		}

		text::before {
			content: '';
			position: absolute;
			left: 15%;
			top: 0;
			width: 30px;
			height: 100%;
			border-radius: 20%;
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
			z-index: -1;
		}

		image {
			width: 12px;
		}
	}

	.pppp {
		color: #696969;
		margin-top: 10px;
	}



// 联系方式

	.warpss {

		.top_wa {
			position: relative;
			width: 80%;
			top: 50vh;
			margin: 0 auto;
			transform: translateY(-50%);
			background: #fff;
			box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
			border-radius: 15px;
			padding: 20px;
			box-sizing: border-box;

			.chahao {
				width: 40px;
				position: absolute;
				right: 0;
				top: 0px;
			}

			.btn_que {
				width: 95%;
				height: 57px;
				margin: 0 auto;
				line-height: 57px;
				text-align: center;
				background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
				border-radius: 5px;
				font-size: 16px;
				font-family: SourceHanSansCN-Bold, SourceHanSansCN;
				font-weight: bold;
				color: #FFFFFF;
			}

			

			.head_tou {
				font-size: 18px;
				color: #000;
				text-align: center;
				font-weight: 600;
			}

			.shuom {
				margin: 20px 0;
				font-size: 12px;
				color: #666;
				text-align: center;
			}
		}
	}
	.weixin {
				position: relative;
				width: 100%;
				height: 57px;
				background: rgba(255, 255, 255, 0.7);
				box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
				border-radius: 6px;
				border: 1px solid #E3E3E3;
				display: flex;
				align-items: center;
				padding: 10px;
				margin: 10px 0;
				.wxh {
					width: 20%;
					font-size: 14px;
					font-weight: 600;
					color: #343434;
					border-right: 1px solid #e5e5e5;
				}

				.inp {
					flex: 1;
					padding: 0 10px;
					font-size: 14px;
					font-weight: bold;
					color: #000000;
				}
			}

	.bot_box {
		padding: 20px;
		font-size: 14px;
		line-height: 1.5;
		color: #5b5757;
	}

	.copy {
		background: linear-gradient(275deg, #FE4768 0%, #FF867D 100%);
		border-radius: 7px;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		width: 50%;
		margin: 0 auto;
		height: 40px;
		margin-top: 20px;
	}

	.copybtn {
		width: 62px;
		height: 33px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
		font-size: 12px;
	}

	.invitecode {
		margin-left: 10px;
		font-size: 12px;
	}

	.i_right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		p {
			font-size: 12px;
			margin-bottom: 4px;

			text {
				font-weight: 600;
			}
		}
	}
</style>